<template>
  <div class="wbox">
    <div class="top">
      <img
        @click="goback"
        class="timg"
        src="../../assets/images/cz1.png"
        alt=""
      />
      <span class="tfont">API</span>
    </div>
    <div class="mbox">
      <div class="mbtna mbtn1" @click="handleCreateBtn">创建API</div>
      <div class="mbtn1" @click="handleDelAll">删除所有API</div>
    </div>
    <div class="fbox">
      <div class="f1">温馨提示</div>
      <div class="f2">
        1. 每个用户最多创建{{ apiNumber }}个API key，具体支持的币种请<span
          style="color: #f5d55a"
          @click="toDoc"
          >查看API文档</span
        >。
      </div>
      <div class="f2">
        2. 请勿将您的 API Key 透露给任何人，以免造成资产损失。建议为API
        Key绑定IP，以提高您的账户安全性。每个API
        Key最多绑定10个IP，多个IP地址用空格分隔，如192.168.1.1 192.168.1.2
        192.168.1.3。
      </div>
      <div class="f2">
        3. 请注意，将API Key绑定在第三方平台，可能有安全隐患，请您谨慎操作。
      </div>
    </div>
    <div v-show="!apiList.length" class="no_data">
      <img src="../../assets/images/no_data.png" alt="" />
      <p>{{ $t("long.zanwushuju") }}</p>
    </div>
    <div class="bqbox" v-for="item in apiList" :key="item.id">
      <div class="bqtop">
        <div class="bqt1">{{ item.name }}</div>
        <div class="bqt2" v-show="!item.isShow">
          <div class="btn1 bqbtn" @click="handleEdit(item)">编辑</div>
          <div class="btn2 bqbtn" @click="handleDel(item)">删除</div>
        </div>
        <div class="bqt2" v-show="item.isShow">
          <div class="btn1 bqbtn" @click="handleSave(item)">保存</div>
          <div class="btn2 bqbtn" @click="item.isShow = false">取消</div>
        </div>
      </div>
      <div class="mabox" v-show="item.isShow">
        <img class="maimg" :src="codeImgUrl" alt="" />
        <div class="mafont">扫码获取地址</div>
      </div>
      <div>
        <div class="bq2">API Key</div>
        <div class="wenzi">
          {{ item.accessKey }}
          <img
            @click="copyLink(item.accessKey)"
            class="fuzhi"
            src="../../assets/images/options2.png"
            alt=""
          />
        </div>
      </div>
      <div v-show="item.isShow" style="margin: 10px 0">
        <div class="bq2">
          Secret Key
          <span style="color: #f5d55a; margin-left: 10px" @click="clickLook(item)"
            >点击查看</span
          >
        </div>
        <!-- <div class="wenzi">
          0uugeBpwSCbTDAdWRLtqw4TSXlPiBdsskMjxJ0AmPWVaBzO1gu2tEaDeFX9L3Gj8
          <img class="fuzhi" src="../../assets/images/options2.png" alt="" />
        </div> -->
      </div>
      <div v-show="item.isShow">
        <div class="bq2">API权限：</div>
        <div
          class="cbox"
          v-for="(item, index) in per_list"
          :key="index"
          @click="choosePerApi(index)"
        >
          <!-- ? require('../../assets/images/notarizeyes.png')
            : require('../../assets/images/notarizeno.png') -->
          <img
            class="xzimg"
            :src="
              per_api[index] == 1
                ? require('../../assets/images/notarizeyes.png')
                : require('../../assets/images/notarizeno.png')
            "
            alt=""
          />
          <span class="xzfont">{{ item }}</span>
        </div>
      </div>
      <div v-show="item.isShow">
        <div class="bq2">IP地址权限</div>
        <div
          class="cbox"
          v-for="(item, index) in per_ip"
          :key="index"
          @click="per_ip_index = index"
        >
          <!-- ? require('../../assets/images/notarizeyes.png')
            : require('../../assets/images/notarizeno.png') -->
          <img
            class="xzimg"
            :src="
              per_ip_index == index
                ? require('../../assets/images/notarizeyes.png')
                : require('../../assets/images/notarizeno.png')
            "
            alt=""
          />
          <span class="xzfont">{{ item }}</span>
        </div>
      </div>
      <div class="ffbox" v-show="item.isShow && per_ip_index == 1">
        <div class="ff" v-for="(item, index) in ipTextList" :key="index">
          <div class="ff1">{{ item }}</div>
          <van-icon name="clear" color="#f9f9f9" @click="delIpText(index)" />
        </div>
      </div>
      <div class="in2" v-show="item.isShow && per_ip_index == 1">
        <van-field
          v-model="submitForm.ipText"
          placeholder="当输入多个ip地址时，请使用空格隔开"
        />
        <span class="in2font" @click="iplistBtn">确认</span>
      </div>
      <img
        @click="handleDetailShow(item)"
        class="ximg"
        :src="
          !item.isShow
            ? require('../../assets/images/xia.png')
            : require('../../assets/images/shang.png')
        "
        alt=""
      />
    </div>
    <van-popup v-model="apiShow" position="bottom">
      <div class="box">
        <div class="btop">
          <span class="t1">创建API</span>
          <img
            @click="apiShow = false"
            class="close-img"
            src="../../assets/images/close.png"
            alt=""
          />
        </div>
        <div class="ibox">
          <div class="i1">
            <span class="red">*</span>
            给API密钥一个标签
          </div>
          <div class="i2">
            <van-field v-model="submitForm.label" placeholder="请输入标签" />
          </div>
        </div>
        <div class="ibox">
          <div class="i1">
            <span class="red">*</span>
            请输入邮箱{{ getUserInfo.email }} 收到的6位验证码
          </div>
          <div class="i2">
            <van-field v-model="submitForm.code" placeholder="请输入验证码" />
            <p class="yzm" @click="sendEmailCode">
              {{
                sendEmailText === $t("common.fasongyanzhengma")
                  ? sendEmailText
                  : sendEmailText + "s"
              }}
            </p>
          </div>
        </div>
        <van-button @click="handleCreate" type="info" class="queren">{{
          $t("long.queren")
        }}</van-button>
      </div>
    </van-popup>
    <van-dialog v-model="firstShow" class="oneflatshow" show-cancel-button>
      <div class="fscon">
        <div class="fsbox">
          <div class="fs1">API Key</div>
          <div class="fs2">
            {{ firstDetail.accessKey }}
            <img
              @click="copyLink(firstDetail.accessKey)"
              class="fuzhi"
              src="../../assets/images/options2.png"
              alt=""
            />
          </div>
        </div>
        <div class="fsbox">
          <div class="fs1">Secret Key</div>
          <div class="fs2">
            {{ firstDetail.secretKey }}
            <img
              @click="copyLink(firstDetail.secretKey)"
              class="fuzhi"
              src="../../assets/images/options2.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="xbutton" style="margin-top: 0 !important; width: 50vw">
        <button class="btn2" @click="firstShow = false" style="width: 100%">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
    <van-dialog v-model="withdrawalShow" class="oneflatshow" show-cancel-button>
      <div class="fscon2">
        <div class="ibox">
          <div class="i1">
            <span class="red">*</span>
            请输入邮箱{{ getUserInfo.email }} 收到的6位提现验证码
          </div>
          <div class="i2">
            <van-field
              v-model="submitForm.withdrawalCode"
              placeholder="请输入提现验证码"
            />
            <p class="yzm" @click="sendEmailCode(2)">
              {{
                sendEmailText === $t("common.fasongyanzhengma")
                  ? sendEmailText
                  : sendEmailText + "s"
              }}
            </p>
          </div>
        </div>
      </div>
      <div class="xbutton" style="margin: 0 auto 8vw">
        <button class="btn1" @click="withdrawalShow = false">
          {{ $t("common.quxiao") }}
        </button>
        <button class="btn2" @click="handleSave2">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>

    <van-dialog v-model="lookShow" class="oneflatshow" show-cancel-button>
      <div class="fscon2">
        <div class="ibox">
          <div class="i1">
            <span class="red">*</span>
            请输入邮箱{{ getUserInfo.email }} 收到的6位验证码
          </div>
          <div class="i2">
            <van-field
              v-model="submitForm.lookCode"
              placeholder="请输入验证码"
            />
            <p class="yzm" @click="sendEmailCode(3)">
              {{
                sendEmailText === $t("common.fasongyanzhengma")
                  ? sendEmailText
                  : sendEmailText + "s"
              }}
            </p>
          </div>
        </div>
      </div>
      <div class="xbutton" style="margin: 0 auto 8vw">
        <button class="btn1" @click="lookShow = false">
          {{ $t("common.quxiao") }}
        </button>
        <button class="btn2" @click="getLook">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Toast, Dialog } from "vant";
import QRCode from "qrcode";
export default {
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  data() {
    return {
      lookShow: false,
      timer: null,
      withdrawalShow: false,
      per_list: ["允许读取", "允许划转", "允许合约", "允许提现"],
      per_ip: ["无限制(缺乏安全)", "限制只对受信任的ip访问(推荐)"],
      per_api: [0, 0, 0, 0],
      per_ip_index: 1,
      ipTextList: [],
      apiList: [],
      firstShow: false,
      firstDetail: {
        accessKey: "",
        secretKey: "",
      },
      apiShow: false,
      sendEmailText: this.$t("common.fasongyanzhengma"),
      submitForm: {
        label: "",
        code: "",
        ipText: "",
        withdrawalCode: "",
        lookCode: "",
      },
      chooseItem: {},
      apiNumber: 0,
      codeImgUrl: "",
    };
  },
  activated() {
    this.getApiKeyNumber();
    this.getList();
  },
  methods: {
    clickLook(item) {
      this.chooseItem = item
      this.lookShow = true;
      this.sendEmailText = this.$t("common.fasongyanzhengma");
      this.submitForm.lookCode = "";
      clearInterval(this.timer);
    },
    async getLook() {
      const ret = await this.$http({
        url: "/user/app/userapikey/secretKey",
        method: "get",
        params: {
          accessKey: this.chooseItem.accessKey,
          verifyCode: this.submitForm.lookCode,
        },
      });
      if (ret.data.code === 0) {
        this.lookShow = false
        this.firstDetail = {
          accessKey: this.chooseItem.accessKey,
          secretKey:ret.data.data
        };
        this.firstShow = true;
      }
    },
    toDoc() {
      localStorage.setItem("zh", 1);
      this.$router.push("/problem");
    },
    handleCreateBtn() {
      this.apiShow = true;
      this.submitForm.label = "";
      this.sendEmailText = this.$t("common.fasongyanzhengma");
      clearInterval(this.timer);
    },
    async getApiKeyNumber() {
      const ret = await this.$http({
        url: "/user/app/userapiconfig",
        method: "get",
        data: {},
      });
      if (ret.data.code === 0) {
        this.apiNumber = ret.data.data || 0;
      }
    },
    handleDetailShow(item) {
      this.apiList.forEach((v) => {
        if (v.id != item.id) {
          v.isShow = false;
        }
      });
      item.isShow = !item.isShow;

      if (item.isShow) {
        this.getDetail(item);
      }
    },
    async getDetail(item) {
      const ret = await this.$http({
        url: "/user/app/userapikey/" + item.id,
        method: "get",
        data: {},
      });
      if (ret.data.code === 0) {
        let zdata = ret.data.data;
        item.detail = zdata;
        this.per_ip_index = zdata.ipList.length ? 1 : 0;
        this.ipTextList = zdata.ipList;
        this.submitForm.ipText = zdata.ipList.join(" ");
        // this.permission ["read", "transfer", "contract", "withdrawal"][v];
        let arrString = zdata.permission;
        let arrIndex = [];
        let arr = ["read", "transfer", "contract", "withdrawal"];
        arr.forEach((v) => {
          if (arrString && arrString.includes(v)) {
            arrIndex.push(1);
          } else {
            arrIndex.push(0);
          }
        });
        this.per_api = arrIndex;
        console.log("item", item);
        this.getCodeImg(item);
      }
    },
    getCodeImg(item) {
      QRCode.toDataURL(item.accessKey, {
        //这个this.url就是你扫码后要跳转的地址
        version: 7, //版本号
        errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
        width: 280, //设置二维码图片大小
        height: 280,
      })
        .then((url) => {
          // console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
          this.codeImgUrl = url; //赋值给变量。用在img的src属性上
        })
        .catch((err) => {
          console.error(err);
        });
    },
    async handleDelAll() {
      Dialog.confirm({
        title: "提示",
        message: "确定删除全部API?",
        theme: "round-button",
      })
        .then(async () => {
          const ret = await this.$http({
            url: "/user/app/userapikey/all",
            method: "delete",
            data: {},
          });
          if (ret.data.code === 0) {
            this.$toast("删除成功");
            this.getList();
          }
        })
        .catch(() => {
          //
        });
    },
    async handleDel(item) {
      Dialog.confirm({
        title: "提示",
        message: "确定删除API?",
        theme: "round-button",
      })
        .then(async () => {
          const ret = await this.$http({
            url: "/user/app/userapikey/" + item.id,
            method: "delete",
            data: {},
          });
          if (ret.data.code === 0) {
            this.$toast("删除成功");
            this.getList();
          }
        })
        .catch(() => {
          //
        });
    },
    handleSave2() {
      if (!this.submitForm.withdrawalCode) {
        this.$toast("请填写提现验证码");
        return;
      }
      this.handleSave(this.chooseItem, 2);
    },
    async handleSave(item, type = 1) {
      if (this.per_api[3] == 1 && type == 1) {
        // 允许提现
        this.chooseItem = item;
        if (this.per_ip_index != 1 || !this.ipTextList.length) {
          this.$toast("开启提现权限时，必须设置IP白名单");
          return;
        }
        clearInterval(this.timer);
        this.withdrawalShow = true;
        this.sendEmailText = this.$t("common.fasongyanzhengma");
        this.submitForm.withdrawalCode = "";
        return;
      }
      if (this.per_ip_index == 1) {
        if (!this.ipTextList.length) {
          this.$toast("请填写ip信息");
          return;
        }
      }

      let arrIndex = [];
      this.per_api.forEach((v, i) => {
        if (v == 1) {
          arrIndex.push(i);
        }
      });
      //（read读取、transfer划转、contract合约、withdrawal提现
      let arrString = arrIndex.map((v) => {
        return ["read", "transfer", "contract", "withdrawal"][v];
      });

      let params = {
        id: item.id,
        permission: arrString.join(" "),
        hasIpLimit: this.per_ip_index == 1 ? 1 : 0,
        verifyCode: this.submitForm.withdrawalCode,
        ipList: this.ipTextList,
      };
      console.log("params", params);
      const ret = await this.$http({
        url: "/user/app/userapikey",
        method: "put",
        data: params,
      });
      if (ret.data.code === 0) {
        this.$toast("修改成功");
        this.withdrawalShow = false;

        item.isShow = false;
      }
    },
    handleEdit(item) {
      this.handleDetailShow(item);
      // item.isShow = true;
    },
    delIpText(index) {
      this.ipTextList.splice(index, 1);
    },
    iplistBtn() {
      if (this.submitForm.ipText) {
        this.ipTextList = this.submitForm.ipText.split(" ");
      }
    },
    choosePerApi(index) {
      this.$set(this.per_api, index, this.per_api[index] == 0 ? 1 : 0);
    },
    async getList() {
      const ret = await this.$http({
        url: "/user/app/userapikey/page",
        method: "get",
        params: {
          current: 1,
          size: 100,
        },
      });
      if (ret.data.code === 0) {
        this.apiList = ret.data.data.records.map((v) => {
          return {
            ...v,
            isShow: false,
          };
        });
      }
    },
    async handleCreate() {
      if (!this.submitForm.label) {
        Toast("请输入标签");
        return;
      }
      if (!this.submitForm.code) {
        Toast("请输入验证码");
        return;
      }
      const ret = await this.$http({
        url: "/user/app/userapikey",
        method: "post",
        data: {
          name: this.submitForm.label,
          verifyCode: this.submitForm.code,
        },
      });
      if (ret.data.code === 0) {
        this.firstDetail = ret.data.data;
        this.firstShow = true;
        this.apiShow = false;
        this.getList();
      }
    },
    async sendEmailCode(type = 1) {
      if (!this.submitForm.label && type == 1) {
        Toast("请输入标签");
        return;
      }
      if (this.sendEmailText !== this.$t("common.fasongyanzhengma")) {
        return;
      }
      this.sendEmailText = 60;
      this.timer = setInterval(() => {
        if (this.sendEmailText <= 1) {
          clearInterval(this.timer);
          this.sendEmailText = this.$t("common.fasongyanzhengma");
        } else {
          this.sendEmailText -= 1;
        }
      }, 1000);
      const ret = await this.$http({
        url:
          type == 3
            ? "/user/app/userapikey/secretKey/verify-code"
            : type == 2
            ? "/user/app/userapikey/modify/verify-code"
            : "/user/app/userapikey/create/verify-code",
        method: "get",
        params: {
          name:
            type == 3
              ? this.submitForm.lookCode
              : type == 2
              ? this.chooseItem.name
              : this.submitForm.label,
          time: this.getFormatDate(),
        },
      });
      if (ret.data.code === 0) {
        Toast(this.$t("common.fasongcheng"));
      }
    },
    getFormatDate() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        seconds;
      return currentDate;
    },
    copyLink(val) {
      // 复制链接  val 就是你需要复制的链接
      this.$copyText(val).then(
        () => {
          this.$toast(this.$t("common.fuzhicheng"));
        },
        () => {
          this.$toast(this.$t("common.fuzhishi"));
        }
      );
    },
    goback() {
      this.$router.go("-1");
    },
  },
};
</script>

<style lang="scss" scoped>
.wbox {
  padding-bottom: 10vw;
}
.top {
  height: 11.73vw;
  position: relative;
  width: 100%;
  .timg {
    width: 5.3vw;
    left: 2.4vw;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }
  .tfont {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 4.8vw;
    color: #fff;
  }
}
.mbox {
  padding: 4vw;
  display: flex;
  .mbtn1 {
    width: 26vw;
    height: 10vw;
    border-radius: 2px;
    text-align: center;
    line-height: 11vw;
    margin-right: 5vw;
    background-color: #171A2B;
    color: #d6d6d6;
  }
  .mbtna {
    background-color: #0a7aff;
    color: #fff;
  }
}
.fbox {
  padding: 4vw;
  font-size: 12px;
  color: #d6d6d6;
  text-align: left;
  font-family: PingFangSC-regular;
  .f1 {
    color: #fffdfa;
  }
  .f2 {
    line-height: 5vw;
    margin-top: 2.4vw;
  }
}
.van-popup {
  background-color: #090A1B;
}
.box {
  padding: 3vw 3vw 6vw;
  .btop {
    width: 100%;
    height: 10vw;
    position: relative;
    line-height: 10vw;
    text-align: center;
    font-size: 4.5vw;
    .close-img {
      width: 7vw;
      position: absolute;
      right: 0vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.van-cell {
  background-color: #171A2B;
  color: #fff !important;
  padding-right: 0vw !important;
  padding-left: 0vw !important;
}
::v-deep .van-field__control {
  color: #fff !important;
}
.van-cell::after {
  border: 0 !important;
}
.queren {
  width: 92vw;
  margin: 6vw 0 4vw;
}
.ibox {
  margin: 3vw 0;
  padding: 3vw;
  text-align: left;
  .i1 {
    font-size: 3.2vw;
    color: #d6d6d6;
    margin-bottom: 2vw;
    .red {
      color: #e4493a;
    }
  }
  .i2 {
    background-color: #171A2B;
    padding-left: 3vw;
    position: relative;
    .yzm {
      position: absolute;
      font-size: 3.2vw;
      color: #f5d55a;
      right: 3vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.bqbox {
  margin: 0 3vw;
  padding: 3vw;
  border-radius: 5px;
  background-color: rgba(45, 47, 59, 1);
  margin-bottom: 6vw;
  &:last-child {
    margin-bottom: 0;
  }
  .bqtop {
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bqt1 {
      font-size: 4vw;
      color: #d6d6d6;
    }
    .bqt2 {
      display: flex;
    }
    .bqbtn {
      width: 13.6vw;
      height: 7vw;
      text-align: center;
      line-height: 7vw;
      font-size: 11px;
      color: #fffdfa;
      border-radius: 2px;
      margin-left: 4vw;
    }
    .btn1 {
      background-color: #0a7aff;
    }
    .btn2 {
      background-color: #e4493a;
    }
  }
  .mabox {
    margin: 4vw auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .maimg {
      width: 42vw;
      height: 42vw;
      //   background-color: red;
    }
    .mafont {
      color: #d6d6d6;
      font-size: 3.2vw;
      text-align: center;
      margin-top: 3vw;
    }
  }
  .bq2 {
    margin: 5vw 0 3vw;
    font-size: 11px;
    color: #d6d6d6;
    text-align: left;
  }
  .wenzi {
    font-size: 4.8vw;
    color: #fffdfa;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 7vw;
    word-wrap: break-word;
    text-align: left;
  }
  .fuzhi {
    width: 5vw;
    position: relative;
    top: 4px;
  }
  .ximg {
    width: 6.6vw;
    margin: 6vw auto 0vw;
  }
}
.cbox {
  display: flex;
  height: 10vw;
  align-items: center;
  .xzimg {
    width: 4.2vw;
    margin-right: 2vw;
  }
  .xzfont {
    color: #fffdfa;
    font-size: 3.6vw;
  }
}
.in2 {
  padding-left: 2vw;
  background-color: #8992AE;
  position: relative;
  .in2font {
    font-size: 12px;
    color: #f5d55a;
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
  }
  .van-cell {
    background-color: #8992AE;
    color: #fff !important;
    padding-right: 0vw !important;
    padding-left: 0vw !important;
  }
  ::v-deep .van-field__control {
    color: #fff !important;
    font-size: 12px;
  }
}
.ffbox {
  display: flex;
  flex-wrap: wrap;
  margin: 4vw 0;
  .ff {
    width: 26vw;
    padding: 1vw 2vw;
    border-radius: 2px;
    background-color: #8992AE;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 2vw;
    margin-bottom: 2vw;
    .ff1 {
      font-size: 3.6vw;
      color: #f9f9f9;
    }
  }
}
.oneflatshow {
  width: 75.2vw;
  // height: 68.2vw;
  padding-bottom: 0;

  ::v-deep .van-dialog__footer {
    display: none;
    margin-bottom: 20px;

    .van-button--large {
      background-color: #171A2B;
      display: flex;
      justify-content: center;
      align-items: center;

      .van-button__content {
        width: 30.1vw;
        height: 9.6vw;
        background-color: #8992AE;
        color: #fff;
        border-radius: 5px;
      }
    }

    .van-dialog__confirm {
      .van-button__content {
        background-color: #0a7aff;
      }
    }

    .van-hairline--left::after {
      border-color: #171A2B;
    }
  }

  ::v-deep .van-hairline--top::after {
    border-top-width: 0;
  }
}
.fscon {
  padding: 10vw;
  .fsbox {
    display: flex;
    flex-direction: column;
    text-align: left;

    &:first-child {
      margin-bottom: 8vw;
    }
    .fs1 {
      color: #8992AE;
      font-size: 3.2vw;
      margin-bottom: 3vw;
    }
    .fs2 {
      color: #fff;
      font-size: 4vw;
      word-wrap: break-word;
      line-height: 5vw;
      .fuzhi {
        width: 3vw;
      }
    }
  }
}
.fscon2 {
  padding: 4vw 2vw;
}
.no_data {
  margin-top: 13.3vw;
  p {
    color: #8992AE;
  }
  img {
    width: 16vw;
    margin-bottom: 2.6vw;
  }
}
</style>